<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        height: 100%;
        font: bold 14px 'Arial', 'sans-serif';
      }

      .calculator {
        width: 325px;
        height: auto;
        margin: 100px auto;
        padding: 20px 20px 9px;
        background-color: #9ed3e5;
        border-radius: 3px;
        box-shadow: 0 3px 1px #009be0;
      }

      .top,
      .keys {
        overflow: hidden;
      }

      .top span.clear {
        float: left;
        color: #fff;
        background-color: #ffa0a8;
      }

      .top .screen {
        float: right;
        width: 212px;
        height: 40px;
        padding: 0 10px;
        background-color: #7aa7ba;
        border-top: 4px solid #608696;
        border-radius: 3px;

        font-size: 17px;
        line-height: 40px;
        color: #fff;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        text-align: right;
        letter-spacing: 1px;
      }

      .top .clear,
      .keys span {
        float: left;
        position: relative;
        top: 0;
        width: 66px;
        height: 36px;
        color: #888;
        text-align: center;
        line-height: 36px;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 4px rgba(0, 0, 0, 0.2);
        margin: 0 7px 11px 0;
        /* 禁止选中文本 */
        user-select: none;
        cursor: pointer;
        transition: transform 0.3s linear;
      }

      .keys .operator {
        margin-right: 0;
      }

      .keys span.eval {
        background-color: #f1fe92;
      }

      .top span:hover,
      .keys span:hover {
        color: #fff;
        background-color: #9c89f5;
      }

      .top span:active,
      .keys span:active {
        transform: translateY(3px);
      }
    </style>
    <script>
      //eval()可以计算字符串,即字符串中的内容会尽可能的进行运算,得到最终结果
      //console.log(eval('1 + 2'))
    </script>
  </head>
  <body>
    <div class="calculator">
      <div class="top">
        <span class="clear" onclick="clearScreen()">C</span>
        <div class="screen"></div>
      </div>
      <div class="keys">
        <span onclick="calc(7)">7</span>
        <span onclick="calc(8)">8</span>
        <span onclick="calc(9)">9</span>
        <span class="operator" onclick="calc('+')">+</span>
        <span onclick="calc(4)">4</span>
        <span onclick="calc(5)">5</span>
        <span onclick="calc(6)">6</span>
        <span class="operator" onclick="calc('-')">-</span>
        <span onclick="calc('1')">1</span>
        <span onclick="calc('2')">2</span>
        <span onclick="calc('3')">3</span>
        <span class="operator" onclick="calc('/')">÷</span>
        <span onclick="calc(0)">0</span>
        <span onclick="getDot()">.</span>
        <span class="eval" onclick="getResult()">=</span>
        <span class="operator" onclick="calc('*')">×</span>
      </div>
    </div>

    <script>
      //定义状态表变量
      let flag = false
      const screen = document.querySelector('.screen')
      function calc(letter) {
        //判断
        if (flag) {
          //清空
          clearScreen()
          flag = false
        }
        screen.innerHTML = screen.innerHTML + letter
      }

      //处理点
      function getDot() {
        if (flag) {
          clearScreen()
          flag = false
        }
        screen.innerHTML = screen.innerHTML + '.'
      }

      function clearScreen() {
        screen.innerHTML = ''
      }

      function getResult() {
        screen.innerHTML = eval(screen.innerHTML)
        flag = true
      }
    </script>
  </body>
</html>
